<script setup lang="ts">
import OptionsApi from "./options.vue"
import CompositionApi from "./composition.vue"
import CompositionApiSetup from "./compositionSetup.vue"
const click = () => {
    console.log(Date.now())
}
</script>
<template>
    <ul class="tabs">
        <li class="tabItem">
            <OptionsApi></OptionsApi>
        </li>
        <li class="tabItem">
            <CompositionApi :title="111111" @click="click"></CompositionApi>
        </li>
        <li class="tabItem">
            <CompositionApiSetup :title="222222" @click="click"></CompositionApiSetup>
        </li>
    </ul>
    <pre>
        1.编程风格
            Vue@3 的组件可以按两种不同的风格书写：选项式 API 和 组合式 API
            选项式 API vue@2一样的写法(区别不大)
            组合式 API vue@3写法区别完全不是一个风格,更灵活、官方推荐、未来的技术趋势(html模板部分区别不大)


        2.组合式 API setup API是在声明周期 beforeCreate和created vue实例创建之前执行的，所以没有this

        3.模板取消唯一根元素限制
            {{ 
                `<template>
                <div>我是第一个根元素</div>
                <div>我是第二个根元素</div>
            </template>
            `
            }}
    </pre>
</template>
<style scoped lang="less">
.tabs{
    width:100%;
    height:400px;
    display:flex;
    .tabItem{
        flex:33.33%;
        margin:10px;
        border:1px solid red;
    }
}
</style>